<template>
  <div class="page labelSet">
    <van-nav-bar left-arrow @click-left="onClickBack" title="标签设置" class="my-nav-bar2" placeholder />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refreshList">
      <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
        <div class="list">
          <div v-for="(item, index) in list" :key="item.id || item.idInset" class="list-item">
            <div class="content">
              <div class="number">{{ index + 1 }}</div>
              <div class="name">{{ item.itemName }}</div>
            </div>
            <van-image :src="require('@/assets/images/meetingManage/unActiveEdite.png')" alt="" width="30px"
              height="30px" @click="handleGoEdite(item)" />

            <van-image :src="require('@/assets/images/meetingManage/delete.png')" alt="" width="30px" height="30px"
              @click="handleDelete(item)" />
          </div>
        </div>
      </van-list>
      <van-empty description="暂无数据" v-if="!list.length" />
      <div class="add-label">
        <van-image :src="require('@/assets/images/meetingManage/add.png')" alt="" width="75px"
          @click="handleGoEdite()" />
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Axios } from "@/utils/Axios";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
const apiUrl = "/meet/roomNeedItem/"
export default {
  name: "labelSet",
  data() {
    return {
      finishedText: "",
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      pageNum: 1,
    }
  },

  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.pageNum = 1;
        this.refreshing = false;
      }
      Axios({
        url: `${apiUrl}list?column=createTime&order=desc&pageNo=${this.pageNum}&pageSize=20`,
        method: 'get',
      }).then(res => {
        this.pageNum = res.current + 1;
        this.list = [...this.list, ...res.records];
        if (this.list.length === res.total) {
          this.finished = true
          if (this.list.length) {
            this.finishedText = "没有更多了"
          }
        }
      }).catch(() => {
        this.error = true;
      }).finally(() => {
        this.loading = false;
      })
    },
    onClickBack() {
      this.$router.push('/meetingManage')
    },
    handleGoEdite(item) {
      this.$router.push({
        name: "labelSetDetail",
        params: item
      })
    },
    handleDelete(Item) {
      if (Item.id) {
        this.$dialog.confirm({ title: "提示", message: `是否确认撤销` }).then((res) => { 
          res && Axios({
            url: `${apiUrl}delete?id=${Item.id}`,
            method: 'delete',
          }).then(res => {
            this.refreshing = true;
            this.onRefresh();
            Toast(res || '删除成功');
          })
        })
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  }
}
</script>
<style scoped lang="less">
.labelSet {
  background: linear-gradient(180deg, #E5F2FF 0%, #FFFFFF 100%);
  backdrop-filter: blur(0px);

  .my-nav-bar2 {
    background-color: #E5F2FF;
  }

  .refreshList {
    height: calc(100% - 46px);
    padding: 0px 15px 15px;
    overflow: auto;

    .list {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;

        .content {
          display: flex;
          align-items: center;
          gap: 10px;
          width: calc(100% - 77px);
          padding: 10px;
          background-color: #FFFFFF;
          border-radius: 10px;
          border: 1px solid rgb(1 18 77 / 8%);
          font-family: PingFangSC, PingFang SC;
          font-style: normal;
          font-weight: 500;
          font-size: 14px;

          .name {
            color: #0B0B0B;
            padding: 0px;
            font-family: PingFangSC, PingFang SC;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
          }

          .number {
            color: #2C70F4;

          }

        }
      }

    }
        .add-label {
          text-align: right;
        }
  }

  
}
</style>